<template>
  <view class="news">
    <view class="news_item" v-for="(item,index) in list" :key="index" @click="goDetail(item.path)">
      <image :src="item.image"></image>
      <view class="right">
        <view class="tit">
          {{item.title}}
        </view>
        <view class="info">
          <text>发表时间：{{item.data}}</text>
          <text>浏览：{{item.liul}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            image: "http://www.news.cn/photo/2023-01/02/1129251022_16726462919871n.jpg",
            title: "云南昆明：春节临近 鲜花俏销",
            data: "2023-01-02",
            liul: "157",
            path: '/pages/xwym/xwym'
          },
          {
            image: "http://www.news.cn/gangao/2023-01/01/1129250190_16725897623111n.jpg",
            title: "喜庆和期待——澳门元旦即景",
            data: "2023-01-01",
            liul: "304",
            path: '/pages/xwym2/xwym2'
          },
          {
            image: "http://www.news.cn/photo/2023-01/02/1129251135_16726491098651n.jpg",
            title: "尼泊尔博克拉国际机场投入运行",
            data: "2023-01-02",
            liul: "139",
            path: '/pages/xwym3/xwym3'
          }
        ]
      }
    },
    methods: {
      goDetail(url){
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss">
  .news{
    .news_item{
      display: flex;
      padding: 10rpx 20rpx;
      border-bottom: 1px solid #eee;
      image{
        width: 200rpx;
        min-width: 200rpx;
        max-width: 200rpx;
        height: 150rpx;
      }
      .right{
        margin-left: 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .tit{
          font-size: 30rpx;
        }
        .info{
          font-size: 24rpx;
          text:nth-child(2){
            margin-left: 30rpx;
          }
        }
      }
    }
  }
</style>
